<template>
  <div class="page my_E">
    <div class="header bg f-r a-c">
      <div class="left">
        <van-image width="71px" height="71px" round :src="require('../../assets/my/head.png')">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <!-- <div class="bigger" @click="routerJump('/my',1)">普通版</div> -->

      </div>

      <div class="right">
        <div class="username">{{ userInfo.username }}</div>
        <div class="phone">{{ userInfo.phone }}</div>
      </div>
    </div>
    <div class="content">
      <div class="banner bg" @click="routerJump('/my-project-elder')" />
      <div class="cell-group">
        <van-cell-group>
          <van-cell is-link to="/my-help-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon1" alt="">
                <span style="margin-left: 10px">我的帮服</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link to="/my-qs-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon2" alt="">
                <span style="margin-left: 10px">我的问题</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link to="/my-consulting-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon2" alt="">
                <span style="margin-left: 10px">我的咨询</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.userComSum == 0? '' :projectList.userComSum+'条服务待评价'" to="/my-evaluation-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon3" alt="">
                <span style="margin-left: 10px">我的评价</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.interComSum == 0? '' :projectList.interComSum+'条服务待评价'" to="/evaluation-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon4" alt="">
                <span style="margin-left: 10px">中介评价</span>
              </div>
            </template>
          </van-cell>
          <van-cell is-link :value="projectList.warningSum == 0? '' :'预警数量'+projectList.warningSum+'条'" to="/projectwarn-elder">
            <template #title>
              <div class="f-r a-c">
                <img class="img-icon" :src="cellIcon5" alt="">
                <span style="margin-left: 10px">项目预警</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <el-button type="primary" style="width: 100%;margin: 20px 0 50px 0;height: 51px;font-size: 24px;border-radius: 25px;" @click="logout">退出登录</el-button>
    </div>
    <TabBar url="/my" />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { http_my } from '@/api'
export default {
  name: 'My',
  data() {
    return {
      cellIcon1: require('@/assets/my/icon1.png'),
      cellIcon2: require('@/assets/my/icon2.png'),
      cellIcon3: require('@/assets/my/icon3.png'),
      cellIcon4: require('@/assets/my/icon4.png'),
      cellIcon5: require('@/assets/my/icon5.png'),
      projectList: { userComSum: 0, interComSum: 0, warningSum: 0 }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    http_my.page().then(res => {
      this.projectList = res.data
    })
    // eslint-disable-next-line new-cap
  },
  methods: {
    logout() {
      this.$store.dispatch('user/logout')
    }
  }
}
</script>

  <style lang="scss">
  .my_E {
      padding-top: 0;
      .van-cell__value{
    line-height: 40px;
    font-size: 16px;
  }
    .f-r{
    height: 40px;
    span{
        font-size: 20px;
    }
  }
  .bigger{
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 17px;
    width: fit-content;
    float: right;
    position: absolute;
    top: 17px;
    right: 18px;
  }
  .van-icon{
    font-size: 12px;
    margin-top: 7px;
    color: #000;
  }
  }
  .van-cell{
    padding: 12px 17px 7px 15px;
  }
  .my_E {
      .img-icon {
          width: 24px;
          height: 24px;
      }
      .header {
          padding-top: 37px;
          width: 100%;
          height:167px;
          background-image: url('~@/assets/my/header_bg.jpg');
          padding-left: 16px;
          padding-bottom: 36px;
          .right {
              margin-left: 20px;
              .username {
                  font-size: 30px;
                  line-height: 31px;
                  margin-bottom: 13px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
              }
              .phone {
                  font-size: 24px;
                  line-height: 25px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
              }
          }
      }
      .banner {
          margin-bottom: 20px;
          width: 100%;
          height: 91px;
          background-image: url('~@/assets/my/banner.jpg');
      }
      .cell-group {
          border-radius: 10px;
          overflow: hidden;
      }
  }

  .tabbar{
    height: 65px !important;
    img{
      height: 20px !important;
      width: 20px !important;
    }
    .tabbarname{
      font-size: 16px !important;
    }
  }
  </style>
